<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./myself.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
  </head>
  <body id="box">

    <!--弹性盒子布局-->

      <h1 id="text">Staring...</h1>  <!--开辟一个地方，后面的内容放这里-->

      <div id="bottom">
        <label for="speed">Speed:</label> <!--label 标签为 input 元素定义标注（标记）
                                     <label> 标签的 for 属性应当与相关元素的 id 属性相同 -->
        <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1"> 
        <!--  step: 是数字间隔-->
      </div>

      <button class="ripple">Welcome to Join Us</button>
   
        <!--笑话-->
         
        <div class="container">
          <h2>给爷笑一个</h2>
          <h3>Don't Laugh Challenge</h3>
          <div id="joke" class="joke">// Joke goes here</div>
          <button id="jokeBtn" class="btn">Get Another Joke</button>
        </div>  
      
      <!--搜索-->
        <div class="search2">
          <input type="text2" class="input2" placeholder="Search...">
          <button class="btn2">
            <i class="fas fa-search"></i>
          </button>
          </div>

          <!--转动图-->
          <div class="kinetic"></div>

        <!--多个按钮选项-->
        <div class="three">

          <h2>How do you think of this project?</h2>
          <div class="toggle-container">
            <input type="checkbox" id="good" class="toggle">
            <label for="good" class="label"></label>
              <div class="ball"></div>
            </label>
            <span>Good</span>
          </div>
      
          <div class="toggle-container">
            <input type="checkbox" id="cheap" class="toggle">
            <label for="cheap" class="label">
              <div class="ball"></div>
            </label>
            <span>Perfect</span>
          </div>
      
          <div class="toggle-container">
            <input type="checkbox" id="fast" class="toggle">
            <label for="fast" class="label">
              <div class="ball"></div>
            </label>
            <span>Great</span>
          </div>

        </div>
        




    <script src="./myself.js"></script>
  </body>
</html>